<template>
  <!-- 角色权限管理 -->
  <div :style="permissionController?popup.open:popup.close">
    <!-- <h3>角色权限管理</h3>
    {{searchData[0].option}}-->
    <!-- 折叠栏，自定义表格控件，自定义布局控件 -->
    <!-- 搜索框-->
    <!-- {{33333333333333333}} -->
    <div class="SearchContainer">
      <SearchCForL v-if="searchData[0].option.length>0" :searchData="searchData" @searchCallBack="searchCallBack" class="SearchCForL"></SearchCForL>
      <div class="right_row">
        <el-button type="primary" size="mini" @click="sunS_F" style="marginRight: 10px;">搜索</el-button>
        <!--添加和批量删除组件-->
        <!-- 新增按钮 -->
        <addComponent v-if="searchData[0].option.length>0" :diaDataAdd="searchData" @SingleAdd="toAdd"></addComponent>
        <!-- 批量删除 -->
        <!-- <batches @toDelete="toDelete"></batches> -->
      </div>
    </div>

    <div class="out">
      <!--      <div v-show="(switchForLa.draggable||switchForLa.resizable)">{{testLayout[0].i}}</div>-->
      <!--数据列表-->
      <el-table v-loading="table_loading" ref="multipleTable" :data="dataAttribute" v-loading.body="false" border fit highlight-current-row size="mini" :cell-style="{padding:'5px 0'}" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="55"></el-table-column>
        <el-table-column type="index" align="center" label="序号"></el-table-column>
        <el-table-column align="center" v-for="item in searchData" v-if="item.tableSign" :key="item.id" :label="item.CN" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span v-if="item.EN=='sysCompanyCode'">
              <span v-for="i2 in searchData[0].option">
                <!-- {{scope.row}}
                <span>_____</span>-->
                <span v-if="scope.row[item.EN]==i2.value">{{i2.label}}</span>
              </span>
            </span>
            <span v-else>{{scope.row[item.EN]}}</span>
          </template>
          <!-- <template slot-scope="scope">{{scope.row[item.EN]}}</template> -->
        </el-table-column>
        <el-table-column align="center" label="操作" width="250">
          <template slot-scope="scope">
            <!-- 修改组件 -->
            <modificationi class="inline_block" v-if="searchData[0].option.length>0" :attributeOrder="searchData" :modData="scope.row" @modifyData="modifyData"></modificationi>
            <!-- 删除按钮 -->
            <el-button style="color:#C90010;border:none;" icon="el-icon-delete" circle @click="deleteList(scope.row.id)"></el-button>
            <!-- 授权按钮 -->
            <el-button style="color:#0B9AC3;border:none;" icon="el-icon-s-check" circle @click="AUT(scope.row)"></el-button>
            <!-- app授权 -->
            <el-button style="color:#0B9AC3;border:none;" icon="el-icon-mobile-phone" circle @click="APPauthorizationFun(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize" layout="total, prev, pager, next" :total="pagetotal" style="marginTop:20px;padding-left:30px;"></el-pagination>
    </div>
    <!-- 查看组件 -->
    <examine :DialogVisibleMod="DialogVisibleExamine" :modData="examineData" :attributeOrder="searchData" @examineDialog="examineDialog"></examine>
  </div>
</template>
<script>
//引入网格布局
import VueGridLayout from 'vue-grid-layout'
import {
  toolbartop,
  buttonhurdle,
  modificationi,
  examine,
  addComponent,
  batches,
  SearchCForL,
} from './com/index'
import authorization from './authorization'
import {
  addBaseGroup, //增加
  deleteBaseGroup, //删除
  searchBaseGroup, //分页查询
  modifyBaseGroup, //修改
  getBaseGroup, //根据ID获取
  //获取所有数据
  fetchTree,
  //获得租户编号的选项
  findByLevel,
} from '@/api/tenantRolePermissions'
export default {
  data() {
    return {
      table_loading: true, //表格的loading
      //搜索框
      suoS: {},
      //瀑布数据
      //   搜索组件的数据
      searchData: [
        {
          EN: 'sysCompanyCode',
          CN: '租户名称',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{1,20}$',
          err: '长度为1-20的所有字符!',
          result: true,
          sign: true,
          searchSign: false,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'name',
          CN: '名称',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{1,20}$',
          err: '长度为1-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
      ],
      //添加弹窗的数据模型
      diaDataAdd: {
        yyqName: '',
        pqName: '',
        pqNum: '',
        BH: '',
      },
      //删除----Start----------------------------------------
      deleteDataList: [],
      //删除----End----------------------------------------

      //查看----Start----------------------------------------
      //查看的弹窗控制器
      DialogVisibleExamine: false,
      //查看的数据
      examineData: {},
      //查看----End----------------------------------------

      //表格数据
      //后端传来的数据
      dataAttribute: [],
      //表格选中
      multipleSelection: [],
      //分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数
      //权限的控制和隐藏
      permissionController: false,
      //缩进样式
      popup: {
        open: 'padding: 25px 20px;width:600px;transition:0.2s;', //右侧组件展开时的样子
        close: 'padding: 25px 20px;flex:100;transition:0.2s;', //右侧组件关闭时的样子
      },
    }
  },
  computed: {},
  created() {
    this.FBL()
    this.forData(this.currentPage, this.pagesize, this.suoS)
  },
  mounted() {
    //右侧弹框关闭通知
    this.$bus.on('backToAuthorization', (val) => {
      console.log('右侧弹框关闭通知')
      console.log(val)
      this.permissionController = false
    })
  },
  methods: {
    //编辑里面授权按钮
    APPauthorizationFun(row) {
      // console.log(row);
      this.$emit('useBrotherFun', true, row)
    },
    //传参到授权的兄弟组件
    AUT(row) {
      this.permissionController = true
      this.$bus.emit('goToAuthorization', row, this.permissionController)
    },

    //把租户选项的数据遍历到 searchData中
    FBL() {
      let ARR = []
      findByLevel().then((response) => {
        // console.log('BBBBBBBBBBBBBBBBBBBBBBBBBBBBB')
        // console.log(response)
        response.data.forEach((val) => {
          let obj = {}
          obj['label'] = val['name']
          obj['value'] = val['sysCompanyCode']
          ARR.push(obj)
        })
        this.searchData.forEach((val) => {
          if (val.EN == 'sysCompanyCode') {
            val.option = ARR
          }
        })
        // console.log("UUUUUUUUU");
        // console.log(this.searchData);
      })
    },
    //搜索
    sunS_F() {
      this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
    },
    //查询组件回调
    searchCallBack(newData) {
      console.log(newData)
      //组装数据（newData是个数组）

      let obj = {}
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value
      }
      console.log(obj)
      this.suoS = obj
    },
    //渲染数据初始
    forData(page, size, searchData) {
      searchBaseGroup(page, size, searchData).then((response) => {
        this.pagetotal = response.data.total
        this.dataAttribute = response.data.list
        this.table_loading = false
      })
      // fetchTree().then(response => {
      //   this.dataAttribute = response.data;
      //   this.table_loading = false;
      // });
    },

    //添加用户--新增表单组件传来的参数
    toAdd(addData) {
      console.log(addData, '参数参数')
      let obj = {}
      for (let i = 0; i < addData.length; i++) {
        obj[addData[i].EN] = addData[i].value
      }
      console.log(obj)
      addBaseGroup(obj).then((response) => {
        this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
        console.log(response, '结果结果')
        this.$message({
          message: response.message,
          type: 'success',
        })
      })
    },

    //按钮栏传递了删除命令
    toDelete(orderstring) {
      this.$confirm('确认删除？')
        .then((_) => {
          let idArr = []
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id)
          }
          if (idArr.length == 0) {
            alert('请选择要删除的数据！')
            return
          }
          deleteBaseGroup(idArr)
            .then((response) => {
              this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
            })
            .catch((error) => {
              alert('删除失败！')
            })
        })
        .catch((_) => {})
    },

    //单项删除
    deleteList(id) {
      let arrId = [id]
      this.$confirm('确认删除？')
        .then((_) => {
          console.log(arrId)
          deleteBaseGroup(arrId).then((response) => {
            this.$notify({
              title: response.message,
              message: '',
            })
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          })
          done()
        })
        .catch((_) => {})
    },

    //查看
    makeExaId(id) {
      getBaseGroup(id)
        .then((response) => {
          let copyDialog = true
          this.DialogVisibleExamine = copyDialog
          // console.log(response)
          this.examineData = response.data
        })
        .catch((error) => {
          alert('获取失败')
        })
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false
    },

    //修改
    modifyData(value, modData) {
      console.log(value, modData)

      if (value === true) {
        modifyBaseGroup(modData.id, modData)
          .then((response) => {
            console.log(response)
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          })
          .catch((error) => {
            alert('修改失败')
            this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
          })
      } else {
        this.forData(this.currentPage, this.pagesize, this.suoS) //刷新列表
      }
    },

    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      //传递删除的参数
      this.deleteDataList = val
    },

    //分页
    handleSizeChange(val) {
      console.log('每页 ' + val + ' 条')
      this.pagesize = val
      this.forData(this.currentPage, val, this.suoS)
    },
    handleCurrentChange(val) {
      console.log('当前页: ' + val)
      this.currentPage = val
      this.forData(val, this.pagesize, this.suoS)
    },

    //工具栏组件传来的参数
    // FTableFunction(attributeOrderCloneTwiceL) {
    //   this.attributeOrder = attributeOrderCloneTwiceL;
    // },
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    toolbartop,
    buttonhurdle,
    modificationi,
    examine,
    SearchCForL,
    addComponent,
    batches,
    authorization,
  },
}
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.right_row {
  padding: 0px 0px 20px 20px;
  display: inline-block;
  // text-align: right;
}
.SearchContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px 0 0;
}
.SearchCForL {
  // margin-left: 12px !important;
}
</style>
